<template>
  <div class="news-container">
    <div class="news" v-for="(item, index) in newsList" :key="index">
      <!-- 新闻图片 -->
      <div class="news-image">
        <img :src="item.picHref" alt="新闻图片">
      </div>
      <!-- 新闻内容 -->
      <div class="news-content" @click="goToDetail(item)">
        <!-- 新闻标题 -->
        <div class="news-title">{{ item.newsTitle }}</div>
        <!-- 新闻发布者、发布时间和点赞数 -->
        <div class="news-meta">
          <div class="news-pubulisher-info">
            <div class="news-publisher">{{ item.publisherName }}</div>
            <div class="news-timestamp">{{ item.newsTime }}</div>
          </div>
          <div class="news-interaction">
            <i class="fas fa-fire"></i>
            <span>{{ item.follower }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-size="page.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  name: "PublisherNewsList",
  components: {},
  props: ["newsList", "page"],
  data() {
    return {
      // page: {
      //     currentPage: 1, // 当前页码
      //     pageSize: 10, // 每页显示的条数
      //     total: 0, // 默认 0 条，等待数据库渲染
      // },
      // newsList: [
      //   {
      //     picHref: "http://cms-bucket.ws.126.net/2025/0316/20b46595p00st7mdw0041c0009c0070c.png",
      //     newsTitle: "3076人上缴礼金2095万 青海多地就整治违规收礼再动员",
      //     publisherName: "潇湘晨报",
      //     newsTime: "1小时前",
      //     follower: "21",
      //     newsId: "1"
      //   },
      //   {
      //     picHref: "http://cms-bucket.ws.126.net/2025/0316/20b46595p00st7mdw0041c0009c0070c.png",
      //     newsTitle: "3076人上缴礼金20上缴礼金2095万 青海多地上缴礼金2095万 青海多地95万 青海多地就整治违规收礼再动员",
      //     publisherName: "潇湘晨报",
      //     newsTime: "1小时前",
      //     follower: "21",
      //     newsId: "2"
      //   },
      // ]
    }
  },
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val
      this.page.currentPage = 1
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.$emit('switchPage', this.page);
    },
    scrollToTop() {
      window.scrollTo(0, 0)
    },
    goToDetail(item) {
      console.log(item.newsId);
      this.$router.push({
        name: 'detail',
        params: {news_id: item.newsId},
      })
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.news {
  display: flex;
  background-color: white;
  padding-top: 7px;
  padding-bottom: 7px;
  /* border-radius: 8px; */
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
  width: 746px;
  border-bottom: 1px solid #ff4d4f;
  overflow: hidden;
  /* margin-bottom: 10px; */
}

.news-image {
  width: 26%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.news-image img {
  width: 80%;
  height: auto;
  border-radius: 8px;
}

.news-content {
  width: 75%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.news-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: 2.8em;
}

.news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
}

.news-pubulisher-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.news-timestamp {
  margin-left: 10px;
}

.news-publisher {
  font-weight: 500;
}

.news-timestamp {
  color: #999;
}

.news-interaction {
  display: flex;
  align-items: center;
  gap: 5px;
}

.news-interaction span {
  font-size: 14px;
  color: #666;
}

.news-interaction i {
  color: #ff4d4f;
  font-size: 16px;
}

.news-container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.news:hover .news-title {
  color: #ff4d4f;
}

.news:hover {
  cursor: pointer;
}

.page {
  margin-top: 30px;
}

.page /deep/ .el-pagination.is-background .el-pager li.active {
  background-color: #ff4d4f !important;
  color: white !important;
}

.page /deep/ .el-pagination.is-background .el-pager li:hover {
  color: #666;
}
</style>